<template>
  <div :class="classes || ''" class="column no-wrap bg-white-6 border-8 shadow-1 q-pa-md relative-position">
    <div class="row items-center">
      <div class="text-subtitle1 text-bold">{{ '设备运行统计' }}</div>
      <q-space></q-space>
    </div>
    <q-separator class="q-my-sm"></q-separator>
    <div class="col row q-col-gutter-md">
      <div v-for="(col, index) in columns" :key="col.field" class="col-6 row no-wrap items-center">
        <q-img :ratio="89 / 83" :src="iconPath(index)" width="4.5rem"></q-img>
        <div class="col column items-start no-wrap">
          <qx-tooltip class="text-grey-7 text-body1">{{ col.label }}</qx-tooltip>
          <div class="row no-wrap items-baseline text-indigo-14 cursor-pointer cursor-hover-image">
            <qx-tooltip class="text-h6">{{ `${formInfo[col.field] || 0}` }}</qx-tooltip>
            <div class="text-caption text-no-wrap text-grey-7">{{ `${col.unit}` }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <q-modal v-model="modalVisible" v-model:loading="loading" :header="header" :menuBtn="false" :persistent="false"
           nonScrollArea width="520">{{ filterAGVStatus }}
  </q-modal>
</template>
<script setup>
import { AGVStatus } from 'src/enum/index.js'
import { formatNumber } from 'src/utils/utils'
import { computed, ref, onMounted } from 'vue'
import { postAPI } from 'src/api'

defineProps({ classes: String })

const header = ref('')
const loading = ref(false)
const modalVisible = ref(false)
const formInfo = defineModel('rowInfo', { type: Object, default: {} })

const setUseRatio = () => {
  postAPI('/tpm/yfagv/api/largeScreen/useRatio', {}, res => {
    formInfo.value.totalUseRatio = formatNumber(res.totalUseRatio * 100, 2)
  }, () => {})
}
const filterAGVStatus = computed(() => AGVStatus.value.filter(el => el.value !== 'TOTALS'))
const iconPath = computed(() => index => new URL(`/src/assets/Icon${index + 1}.png`, import.meta.url).href)
const columns = computed(() => {
  return [{
    label: '任务数', field: 'agvTaskNum', unit: '个'
  }, {
    label: '运行里程', field: 'agvSumDistance', unit: 'km'
  }, {
    label: '运行时长', field: 'agvSumDuration', unit: 'H'
  }, {
    label: '总利用率', field: 'totalUseRatio', unit: '%'
  }]
})

onMounted(setUseRatio)
</script>